<!-- 贴合请购作业：蹇泽阳 -->
<template>
  <div class="app-container">
    <!-- 打印标签 -->
    <div class="printContent">
      <div v-for="item in printTag.data" style="width: 70mm; height: 51.31mm; padding: 2mm" class="main">
        <div class="left" style="width: 28%">
          <span>荣阳</span>
          <img :src="item.imgUrl" alt="" style="width: 120%" />
        </div>
        <div style="flex: 1">
          <table>
            <tr>
              <td class="size-12 center pad3" colspan="4">指令</td>
              <td class="size-12 center pad3" colspan="6">{{ item.orderId }}</td>
            </tr>
            <!-- <tr>
              <td class="size-12 center pad3" colspan="4">材料编码</td>
              <td class="size-12 center pad3" colspan="6">{{ item.mtlNo }}</td>
            </tr> -->
            <tr>
              <td class="size-12 center pad3" colspan="4">名称</td>
              <td class="size-12 center pad3" colspan="6">{{ item.mtlName }}</td>
            </tr>
            <tr>
              <td class="size-12 center pad3" colspan="4">材料</td>
              <td class="size-12 center pad3" colspan="6">{{ item.mtlColor }}</td>
            </tr>
            <tr>
              <td class="size-12 center pad3" colspan="4">数量</td>
              <td class="size-12 center pad3" colspan="6">{{ item.purQty }}</td>
            </tr>
          </table>
        </div>
        <div class="page-break"></div>
      </div>
    </div>

    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
        <h1 class="f16">汇总材料查询</h1>
        <Table
          @selectList="selectList"
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>

    <!-- 我的订购单 -->
    <MyDingGouDan :obj="parentObj" :drawer="drawer" :getTableList="getTableList" @propsDrawerFalse="() => (drawer = false)" />

    <!-- 所有订购单 -->
    <el-drawer v-model="drawer2" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <Find :searchImg="false" :formList="formList12" @findClicked="findClicked12" />
      <div class="flex mt10 JCC" style="width: 100%; background-color: white">
        <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
          <h1 class="f16">所有订购单</h1>
          <Table
            :tableHeader="tableHeader12"
            :tableData="tableData12"
            selection
            class="mt10"
            :outTableHeight="150"
            @selectList="selectList12"
            @currentRow="currentRow12"
          />
        </el-card>
      </div>
      <PageModule :PageData="{ buttonS: true, total: total12 }" @pageChange="handleCurrentChange12" @pageSizeChange="handleSizeChange12" />
    </el-drawer>

    <!-- 当前库存量 -->
    <el-drawer v-model="drawer4" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer4 = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <h1 class="f16">当前库存量</h1>
      <Table :tableHeader="tableHeader14" :tableData="tableData14" />
    </el-drawer>
  </div>
</template>

<script lang="ts" setup name="FitRequisitionJob">
import { ManufacturerQuery } from '@/api/PurchasingDepartment/FactoryPurchasing/MaterialRequisition'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
import service from '@/utils/request'
import { ElLoading } from 'element-plus'
import { debounce } from 'lodash'
import { watch } from 'vue'
import { onMounted } from 'vue'
import qrcode from 'qrcode'
import { ref } from 'vue'
import { nextTick } from 'vue'
import MyDingGouDan from './Components/MyDingGouDan.vue'
const parentObj = ref({
  url: 'thMaterial',
  purTypeFlag: 4
}) as any
const printTag = ref({}) as any
const dialogVisible = ref(false)
const drawer = ref(false)
const drawer2 = ref(false)
const drawer3 = ref(false)
const drawer4 = ref(false)
const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '指令',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '1',
        optionLabel: '汇总'
      },
      {
        optionKey: '2',
        optionValue: '2',
        optionLabel: '差异'
      }
    ]
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '材料分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'checkbox',
    checkboxLabel: '正数',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '负数',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '进入我的订购单'
  },
  {
    type: 'button',
    checkboxLabel: '进入所有订购单'
  },
  {
    type: 'button',
    checkboxLabel: '请购批处理'
  }
]) as any

// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '查询') {
    getTableList()
  }
  if (content === '进入我的订购单') {
    drawer.value = true
    getTableList10()
  }

  if (content === '进入所有订购单') {
    drawer2.value = true
    getTableList12()
  }
  if (content === '选择通用资料') {
    dialogVisible.value = true
    getTableList2()
  }
  if (content === '请购批处理') {
    // 请购批处理
    if (selectTableList.value.length === 0) {
      JMessage.warning('请勾选需要请购批处理的数据')
    } else {
      const res = await service.post<any, any>(`/mes/kf/thMaterial/makeReqOrder?purTypeFlag=${4}`, selectTableList.value)
      if (res.code === 200) {
        JMessage.success(res.msg)
        getTableList()
      } else {
        JMessage.error(res.msg)
      }
    }
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
const selectTableList = ref([])
const selectList = (val: any) => {
  selectTableList.value = val
}
const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo',
    width: '130'
  },
  {
    label: '订单类型',
    prop: 'type'
  },
  {
    width: '130',
    label: '贴合物料编码',
    prop: 'mtlNo2'
  },
  {
    width: '130',
    label: '贴合材料名称',
    prop: 'mtlName2'
  },
  {
    label: '贴合材料颜色',
    prop: 'mtlColor2'
  },
  {
    label: '贴合单位',
    prop: 'mtlUnit2'
  },
  {
    width: '130',
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    width: '130',
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },

  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '需求量',
    prop: 'yQty'
  },
  {
    label: '现用量',
    prop: 'xQty'
  },
  {
    label: '订购量/差异量',
    prop: 'cyQty'
  },
  {
    label: '备注信息',
    prop: 'remark'
  },
  {
    label: '订购单号',
    prop: 'reqNo'
  }
])
const cfmFlag = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '正数')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '负数')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return 0
  } else if (Unaudited.checked) {
    return 1
  } else if (Audited.checked) {
    return 2
  } else {
    JMessage.warning('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return 0
  }
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>(`/mes/kf/thMaterial/getMaterial?pageNum=${currentPage.value}&pageSize=${pageSize.value}`, {
    lotNo: formList.value.find((item: any) => item.selectP === '指令')?.selectValue,
    type: formList.value.find((item: any) => item.selectP === '分类')?.selectValue,
    mtlName: formList.value.find((item: any) => item.inputPlaceholder === '请输入材料名称')?.inputValue,
    mtlColor: formList.value.find((item: any) => item.inputPlaceholder === '请输入材料颜色')?.inputValue,
    typeNo: formList.value.find((item: any) => item.selectP === '材料分类')?.selectValue
      ? formList.value.find((item: any) => item.selectP === '材料分类').selectValue.split('  ')[1]
      : '',
    typeName: formList.value.find((item: any) => item.selectP === '材料分类')?.selectValue
      ? formList.value.find((item: any) => item.selectP === '材料分类').selectValue.split('  ')[0]
      : '',

    pluralFlag: cfmFlag(),
    purTypeFlag: 4,
    deptType: 2
  })
  isLoading.value = false
  tableData.value = tableDataList.rows.map((item: any) => {
    if (item.type === '1') item.type = '汇总'
    if (item.type === '2') item.type = '差异'
    // item.change = true
    // item.disableConfirm = true
    return item
  })
  total.value = tableDataList.total
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0]) => {
  currentTableRow.value = row
}

// 选择通用资料
// 表二模块
const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入物料编码',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '批处理'
  }
])
const selectTableList2 = ref([])
const selectList2 = (val: any) => {
  selectTableList2.value = val
}
const findClicked2 = async (content: string) => {
  if (content === '置空') {
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '批处理') {
    // 批处理
    if (selectTableList2.value.length === 0) {
      JMessage.warning('请选择需要批处理的数据')
    } else {
      const res = await service.post<any, any>('/mes/kf/commonOrder/addBatchPcReqTemp', selectTableList2.value)
      if (res.code === 200) {
        JMessage.success('批处理成功')
        getTableList2()
        getTableList()
      } else {
        JMessage.error(res.msg)
      }
    }
  }
}
const tableData2 = ref([])
const isLoading2 = ref(true)
// 分页器
const currentPage2 = ref(1)
const pageSize2 = ref(40)
const total2 = ref(0)
const handleSizeChange2 = (val: number) => {
  pageSize2.value = val
  getTableList2()
}
const handleCurrentChange2 = (val: number) => {
  currentPage2.value = val
  getTableList2()
}
const tableHeader2 = ref([
  {
    label: '物料编码',
    prop: 'mtlNo',
    backgroundColor: true
  },
  {
    label: '颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '库存量',
    prop: 'stkQty'
  },
  {
    label: '安全量',
    prop: 'safetyQty'
  }
])
const status2 = ref('')
const clickNumber2 = (val: any) => {
  status2.value = val
  getTableList2()
}
// 获取表数据
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList = await service.post<any, any>(
    `/mes/kf/commonOrder/getCommonMaterial?pageNum=${currentPage2.value}&pageSize=${pageSize2.value}`,
    {
      mtlNo: formList2.value.find((item: any) => item.inputPlaceholder === '请输入物料编码')?.inputValue,
      mtlName: formList2.value.find((item: any) => item.inputPlaceholder === '请输入材料名称')?.inputValue,
      color: formList2.value.find((item: any) => item.inputPlaceholder === '请输入材料颜色')?.inputValue,
      publicFlag: 0
    }
  )
  isLoading2.value = false
  tableData2.value = tableDataList.rows.map((item: any) => {
    if (item.purFlag === 'Y') {
      item.backgroundColor = '#FE2416'
      item.change = null
    }

    return item
  })
  total2.value = tableDataList.total
  // currentRow2()
  // summaryData2.value[0].num = tableDataList.sum[0].orderCount
  // summaryData2.value[1].num = tableDataList.sum[0].surplusCount
}, 500)
onMounted(() => {
  // getTableList2()
})
watch(
  () =>
    formList2.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList2()
  }
)

// 我的订购单
const formList10 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入订购单号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入请购单号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '请购类型',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '1',
        optionLabel: '汇总'
      },
      {
        optionKey: '2',
        optionValue: '2',
        optionLabel: '差异'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '订单类型',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '7',
        optionValue: '7',
        optionLabel: '面材'
      },
      {
        optionKey: '8',
        optionValue: '8',
        optionLabel: '面材补单'
      }
    ]
  },
  {
    type: 'date',
    dateLabel: '订购日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入采购员',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料ID',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '未下单',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '已下单',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '导出订购单'
  },
  {
    type: 'button',
    checkboxLabel: '退单'
  }
]) as any
watch(
  () =>
    formList10.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList10()
  }
)
const formList11 = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'dateSingle',
    dateLabel: '需求日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '形成订购单'
  },
  {
    type: 'button',
    checkboxLabel: '打印标签'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '返回'
  },
  {
    type: 'button',
    checkboxLabel: '置空订购信息'
  }
]) as any
const tableHeader10 = ref([
  {
    label: '订单类型',
    prop: 'purType',
    change: true
  },
  {
    change: true,
    width: 130,
    label: '指令号',
    prop: 'orderId'
  },
  {
    label: '型体',
    prop: 'style',
    change: true
  },
  {
    label: '品牌',
    prop: 'brand',
    change: true
  },
  {
    label: '颜色',
    prop: 'color',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    change: true
  },
  {
    width: 130,
    label: '材料名称',
    prop: 'mtlName',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    width: 130,
    label: '订购单号',
    prop: 'purNo',
    change: true
  },
  {
    label: '订购日期',
    prop: 'purDate',
    change: true
  },
  {
    label: '请购量',
    prop: 'qty',
    change: true
  },
  {
    label: '订购数量',
    prop: 'purQty',
    change: true
  },
  {
    label: '库存扣减量',
    prop: 'stkQty',
    change: true
  },
  {
    change: true,
    type: 'functionRow',
    label: '操作'
  },
  {
    change: true,
    label: '厂商名称',
    prop: 'vendorName'
  },
  {
    change: true,
    label: '需求交期',
    prop: 'jqDate'
  },
  {
    type: 'selectV2',
    label: '责任人',
    prop: 'dutyUser',
    options: []
  },
  {
    type: 'selectV2',
    label: '责任原因',
    prop: 'dutyRek',
    options: []
  },
  {
    label: '备注/订购备注',
    prop: 'remark'
  },
  {
    change: true,
    label: '采购人',
    prop: 'createBy'
  },
  {
    change: true,
    width: 130,
    label: '请购单号',
    prop: 'reqNo'
  },
  {
    change: true,
    label: '请购时间',
    prop: 'reqDate'
  },
  {
    change: true,
    label: '打印标识',
    prop: 'printFlag'
  },
  {
    change: true,
    label: '打印时间',
    prop: 'printTime'
  },
  {
    change: true,
    label: '打印次数',
    prop: 'printCount'
  },
  {
    change: true,
    label: '入库数量',
    prop: 'inQty'
  },
  {
    change: true,
    label: '入库时间',
    prop: 'inTime'
  }
])
const tableData10 = ref([])
const selectTableList10 = ref([])
const selectList10 = (val: any) => {
  selectTableList10.value = val
}
const findClicked10 = async (content: string) => {
  if (content === '置空') {
    formList10.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }

  if (content === '导出订购单') {
    if (!currentTableRow10.value.purNo) {
      JMessage.error('当前行订购单号不可为空')
      return
    }
    // 导出订购单
    const res = (await fileRequest.post(`/mes/kf/thMaterial/downMtlPurSlipExcel`, {
      purNo: currentTableRow10.value.purNo,
      purTypeFlag: 4
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '退单') {
    if (selectTableList10.value.length === 0) {
      JMessage.error('请勾选')
      return
    }
    // 退单
    const res = await service.post<any, any>(
      '/mes/kf/thMaterial/backPurqOrder',
      selectTableList10.value.map((item: any) => item.id)
    )
    if (res.code === 200) {
      JMessage.success('退单成功')
      getTableList10()
    } else {
      JMessage.error(res.msg)
    }
  }
}

const findClicked11 = async (content: string) => {
  if (content === '置空') {
    formList11.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '形成订购单') {
    // 形成订购单
    if (selectTableList10.value.length === 0) {
      JMessage.warning('请选择需要形成订购单的数据')
    } else if (formList11.value.find((item: any) => item.selectP === '厂商')?.selectValue === '') {
      JMessage.warning('厂商不可为空')
    } else if (formList11.value.find((item: any) => item.dateLabel === '需求日期')?.dateValue === '') {
      JMessage.warning('需求日期不可为空')
    } else {
      const res = await service.post<any, any>('/mes/kf/thMaterial/makePurqOrder', {
        deliveryDate: formList11.value.find((item: any) => item.dateLabel === '需求日期')?.dateValue,
        vendorNo: formList11.value.find((item: any) => item.selectP === '厂商')?.selectValue.split('  ')[0],
        vendorName: formList11.value.find((item: any) => item.selectP === '厂商')?.selectValue.split('  ')[1],
        deptType: 2,
        list: selectTableList10.value
      })
      if (res.code === 200) {
        JMessage.success(res.msg)
        getTableList10()
      } else {
        JMessage.error(res.msg)
      }
    }
  }
  if (content === '打印标签') {
    // 打印标签
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    const res = (await service.post(
      `/mes/kf/thMaterial/printLabel?printLabelFlag=${1}`,
      selectTableList10.value.map((item: any) => item.id)
    )) as any
    if (res.code === 200) {
      res.data.forEach((item: any) => {
        let qrCodeData = `指令号：${item.orderId} 材料编码：${item.mtlNo} 材料名称：${item.mtlName} 材料颜色：${item.mtlColor} 材料数量：${item.purQty} 材料单位：${item.mtlUnit}` // 替换为你需要生成二维码的数据
        qrcode.toDataURL(qrCodeData, (err: any, url: any) => {
          if (err) {
            JMessage.error(err)
          } else {
            qrCodeData = url
          }
        })
        item.imgUrl = qrCodeData
      })
      printTag.value = res
      loading.close()
      getTableList10()
    } else {
      JMessage.error(res.msg)
      loading.close()
    }
  }
  if (content === '返回') {
    drawer.value = false
  }
  if (content === '置空订购信息') {
    if (selectTableList10.value.length === 0) {
      JMessage.error('请勾选')
      return
    }
    // 置空订购信息
    const res = await service.post<any, any>(
      '/mes/kf/thMaterial/makePurNull',
      selectTableList10.value.map((item: any) => item.id)
    )
    if (res.code === 200) {
      JMessage.success('置空订购信息成功')
      getTableList10()
    } else {
      JMessage.error(res.msg)
    }
  }
  if (content === '删除订购单') {
    // 删除订购单
    const res = await service.post<any, any>(
      '/mes/kf/commonOrder/deletePurqOrder',
      selectTableList10.value.map((item: any) => item.id)
    )
    if (res.code === 200) {
      JMessage.success('删除订购单成功')
      getTableList10()
    } else {
      JMessage.error(res.msg)
    }
  }
}
const currentTableRow10 = ref({}) as any
const currentRow10 = async (row: any = tableData10.value[0]) => {
  currentTableRow10.value = row
}
const confirmChange10 = async (row: any) => {
  const res = (await service.post('/mes/kf/thMaterial/updatePurqOrder', row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
    getTableList10()
  } else {
    JMessage.error(res.msg)
    getTableList10()
  }
}
const visibleChangeV210 = async (visible: boolean, row: any, prop: string) => {
  if (visible) {
    return
  }
  const res = (await service.post('/mes/kf/thMaterial/updatePurqOrder', row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
    getTableList10()
  } else {
    JMessage.error(res.msg)
    getTableList10()
  }
}
const download10 = async (row: any) => {
  drawer4.value = true
  getTableList14()
}
const dbClick10 = async (row: any) => {
  drawer4.value = true
  getTableList14()
}
const isLoading10 = ref(true)
const total10 = ref(0)
const currentPage10 = ref(1)
const pageSize10 = ref(40)
const handleSizeChange10 = (val: number) => {
  pageSize10.value = val
  getTableList10()
}
const handleCurrentChange10 = (val: number) => {
  currentPage10.value = val
  getTableList10()
}
const status10 = ref(0)
// 表格计算函数
const cfmFlag10 = () => {
  const Unaudited = formList10.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '未下单')
  const Audited = formList10.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '已下单')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return '0'
  } else if (Unaudited.checked) {
    return '1'
  } else if (Audited.checked) {
    return '2'
  } else {
    JMessage.warning('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return '0'
  }
}
const getTableList10 = debounce(async () => {
  isLoading10.value = true
  let tableDataList10 = await service.post<any, any>(
    `/mes/kf/thMaterial/getMyPcPurDetail?pageNum=${currentPage10.value}&pageSize=${pageSize10.value}`,
    {
      createBy: formList10.value.find((item: any) => item.inputPlaceholder === '请输入采购员')?.inputValue,
      mtlNo: formList10.value.find((item: any) => item.inputPlaceholder === '请输入物料ID')?.inputValue,
      lotNo: formList10.value.find((item: any) => item.inputPlaceholder === '请输入指令')?.inputValue,
      style: formList10.value.find((item: any) => item.inputPlaceholder === '请输入型体')?.inputValue,
      purNo: formList10.value.find((item: any) => item.inputPlaceholder === '请输入订购单号')?.inputValue,
      reqNo: formList10.value.find((item: any) => item.inputPlaceholder === '请输入请购单号')?.inputValue,
      purType: formList10.value.find((item: any) => item.inputPlaceholder === '请输入订单类型')?.inputValue,
      vendorNo: formList10.value.find((item: any) => item.selectP === '厂商')?.selectValue.split(' ')[0],
      vendorName: formList10.value.find((item: any) => item.selectP === '厂商')?.selectValue.split(' ')[1],
      purDateStart: formList10.value.find((item: any) => item.dateLabel === '订购日期')?.dateValue[0],
      purDateEnd: formList10.value.find((item: any) => item.dateLabel === '订购日期')?.dateValue[1],
      mtlColor: formList10.value.find((item: any) => item.inputPlaceholder === '请输入材料颜色')?.inputValue,
      mtlName: formList10.value.find((item: any) => item.inputPlaceholder === '请输入材料名称')?.inputValue,
      type: formList10.value.find((item: any) => item.selectP === '请购类型')?.selectValue,
      purTypeFlag: 4,
      purFlag: cfmFlag10(),
      deptType: 2,
      userFlag: 1
    }
  )
  isLoading10.value = false
  tableData10.value = tableDataList10.rows.map((item: any) => {
    item.change = true
    item.disableConfirm = true
    item.addAndUpdate = true
    item.functionRow = [
      {
        label: '扣减',
        bgColor: '#409EFF',
        type: 'button'
      }
    ]
    return item
  })
  currentRow10()
  total10.value = tableDataList10.total
}, 500)

// 所有订购单
const formList12 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入订购单号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入请购单号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '订购日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入采购员',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料ID',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '未下单',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '已下单',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '导出当前行订购单'
  },
  {
    type: 'button',
    checkboxLabel: '返回'
  }
]) as any
const tableHeader12 = ref([
  {
    label: '订单类型',
    prop: 'purType',
    change: true
  },
  {
    label: '指令号',
    prop: 'orderId',
    disable: true
  },
  {
    label: '型体',
    prop: 'style',
    change: true
  },
  {
    label: '品牌',
    prop: 'brand',
    change: true
  },
  {
    label: '颜色',
    prop: 'color',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    label: '订购单号',
    prop: 'purNo',
    change: true
  },
  {
    label: '订购日期',
    prop: 'purDate',
    change: true
  },
  {
    label: '订购数量',
    prop: 'purQty',
    change: true
  },
  {
    label: '厂商名称',
    prop: 'vendorName',
    change: true
  },
  {
    label: '需求交期',
    prop: 'jqDate'
  },
  {
    label: '责任人',
    prop: 'dutyUser',
    disable: true
  },
  {
    label: '责任原因',
    prop: 'dutyRek',
    disable: true
  },
  {
    label: '采购人',
    prop: 'createBy',
    disable: true
  },
  {
    label: '请购单号',
    prop: 'reqNo',
    disable: true
  },
  {
    label: '请购时间',
    prop: 'reqDate',
    disable: true
  },
  {
    label: '备注/订购备注',
    prop: 'remark',
    disable: true
  }
])
const tableData12 = ref([])
const selectTableList12 = ref([])
const selectList12 = (val: any) => {
  selectTableList12.value = val
}
const findClicked12 = async (content: string) => {
  if (content === '置空') {
    formList12.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
      item.checked = false
    })
  }
  if (content === '查询') {
    getTableList12()
  }
  if (content === '导出当前行订购单') {
    // 导出当前行订购单
    if (!currentTableRow12.value.purNo) {
      JMessage.error('当前行订购单号不可为空')
      return
    }
    // 导出订购单
    const res = (await fileRequest.post(`/mes/kf/thMaterial/downMtlPurSlipExcel`, {
      purNo: currentTableRow12.value.purNo,
      purTypeFlag: 4
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '返回') {
    drawer2.value = false
  }
}
const currentTableRow12 = ref({}) as any
const currentRow12 = async (row: any = tableData12.value[0]) => {
  currentTableRow12.value = row
}
const isLoading12 = ref(true)
const total12 = ref(0)
const currentPage12 = ref(1)
const pageSize12 = ref(40)
const handleSizeChange12 = (val: number) => {
  pageSize12.value = val
  getTableList12()
}
const handleCurrentChange12 = (val: number) => {
  currentPage12.value = val
  getTableList12()
}
// 表格计算函数
const cfmFlag12 = () => {
  const Unaudited = formList12.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '未下单')
  const Audited = formList12.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '已下单')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return '0'
  } else if (Unaudited.checked) {
    return '1'
  } else if (Audited.checked) {
    return '2'
  } else {
    JMessage.warning('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return '0'
  }
}
const getTableList12 = debounce(async () => {
  isLoading12.value = true
  let tableDataList12 = await service.post<any, any>(
    `/mes/kf/thMaterial/getPcPurDetail?pageNum=${currentPage12.value}&pageSize=${pageSize12.value}`,
    {
      lotNo: formList12.value.find((item: any) => item.inputPlaceholder === '请输入指令号')?.inputValue,
      style: formList12.value.find((item: any) => item.inputPlaceholder === '请输入型体')?.inputValue,
      purNo: formList12.value.find((item: any) => item.inputPlaceholder === '请输入订购单号')?.inputValue,
      reqNo: formList12.value.find((item: any) => item.inputPlaceholder === '请输入请购单号')?.inputValue,
      purType: formList12.value.find((item: any) => item.inputPlaceholder === '请输入订单类型')?.inputValue,
      vendorNo: formList12.value.find((item: any) => item.selectP === '厂商')?.selectValue.split(' ')[0],
      vendorName: formList12.value.find((item: any) => item.selectP === '厂商')?.selectValue.split(' ')[1],
      purDateStart: formList12.value.find((item: any) => item.dateLabel === '订购日期')?.dateValue[0],
      purDateEnd: formList12.value.find((item: any) => item.dateLabel === '订购日期')?.dateValue[1],
      mtlColor: formList12.value.find((item: any) => item.inputPlaceholder === '请输入材料颜色')?.inputValue,
      mtlName: formList12.value.find((item: any) => item.inputPlaceholder === '请输入材料名称')?.inputValue,
      purFlag: cfmFlag12(),
      userFlag: 2,
      purTypeFlag: 4
    }
  )
  isLoading12.value = false
  tableData12.value = tableDataList12.rows
  currentRow12()
})

// 汇总指令查询
const formList13 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  }
]) as any
const findClicked13 = async (content: string) => {
  if (content === '置空') {
    formList13.value.forEach((item: any) => {
      item.inputValue = ''
    })
  }
}
const tableHeader13 = ref([
  {
    label: '指令号',
    prop: 'orderId',
    disable: true
  }
])
const tableData13 = ref([])
const selectTableList13 = ref([])
const selectList13 = (val: any) => {
  selectTableList13.value = val
}
const currentTableRow13 = ref({}) as any
const currentRow13 = async (row: any = tableData13.value[0]) => {
  currentTableRow13.value = row
}
const isLoading13 = ref(true)
const total13 = ref(0)
const currentPage13 = ref(1)
const pageSize13 = ref(40)
const handleSizeChange13 = (val: number) => {
  pageSize13.value = val
  getTableList13()
}
const handleCurrentChange13 = (val: number) => {
  currentPage13.value = val
  getTableList13()
}
const getTableList13 = debounce(async () => {
  isLoading13.value = true
  let tableDataList13 = await service.post<any, any>(`/mes/kf/thMaterial/getOrder?pageNum=${currentPage13.value}&pageSize=${pageSize13.value}`, {
    orderId: formList13.value.find((item: any) => item.inputPlaceholder === '请输入指令')?.inputValue,
    purTypeFlag: 4,
    deptType: 2
  })
  isLoading13.value = false
  tableData13.value = tableDataList13.rows
  currentRow13()
  total13.value = tableDataList13.total
}, 500)

// 获取当前库存量
const tableHeader14 = ref([
  {
    label: '物料编码',
    prop: 'mtlCode',
    disable: true
  },
  {
    label: '物料名称',
    prop: 'mtlName',
    disable: true
  },
  {
    label: '物料规格',
    prop: 'mtlSpec',
    disable: true
  },
  {
    label: '物料规格',
    prop: 'mtlSpec',
    disable: true
  }
])
const tableData14 = ref([])
const selectTableList14 = ref([])
const selectList14 = (val: any) => {
  selectTableList14.value = val
}
const currentTableRow14 = ref({}) as any
const currentRow14 = async (row: any = tableData14.value[0]) => {
  currentTableRow14.value = row
}
const isLoading14 = ref(true)
const getTableList14 = debounce(async () => {
  isLoading14.value = true
  let tableDataList14 = await service.post<any, any>('/mes/kf/thMaterial/getOrder', {
    orderId: currentTableRow10.value.lotNo
  })
  isLoading14.value = false
  tableData14.value = tableDataList14.rows
  currentRow14()
})

// 获取下拉框数据
const getSelectOptions = async () => {
  // 获取材料分类
  let mtlTypeList = await service.get<any, any>('/mes/api/commonQuery/selectTypeList')
  formList.value.find((item: any) => item.selectP === '材料分类')!.selectOptions = mtlTypeList.rows.map((item: any) => {
    return {
      optionKey: item.typeNo,
      optionValue: `${item.typeName}  ${item.typeNo}`,
      optionLabel: `${item.typeName}  ${item.typeNo}`
    }
  })
  // 获取责任人
  let dutyUserList = await service.get<any, any>('/mes/api/commonQuery/queryDutyUser')
  tableHeader10.value[17].options = dutyUserList.rows.map((item: any) => {
    return {
      value: item,
      label: item
    }
  })
  // 获取责任原因
  let dutyRekList = await service.get<any, any>('/mes/api/commonQuery/queryDutyRek')
  tableHeader10.value[18].options = dutyRekList.rows.map((item: any) => {
    return {
      value: item,
      label: item
    }
  })
  // 添加厂商
  let NewArray = []
  const result = await ManufacturerQuery()
  NewArray = result.rows.reduce((arr: any, item: any) => {
    if (item.vendorNo && item.vendorName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.vendorNo + '  ' + item.vendorName)
    }
    return arr
  }, [])
  formList11.value.find((item: any) => item.selectP === '厂商')!.selectOptions = NewArray.map((item: any) => {
    return {
      optionKey: item,
      optionValue: item,
      optionLabel: item
    }
  })
  formList10.value.find((item: any) => item.selectP === '厂商')!.selectOptions = NewArray.map((item: any) => {
    return {
      optionKey: item,
      optionValue: item,
      optionLabel: item
    }
  })
  formList12.value.find((item: any) => item.selectP === '厂商')!.selectOptions = NewArray.map((item: any) => {
    return {
      optionKey: item,
      optionValue: item,
      optionLabel: item
    }
  })
  // 添加指令
  let orderList = await service.post<any, any>('/mes/kf/thMaterial/getOrder', {
    deptType: 2,
    purTypeFlag: 7
  })
  formList.value.find((item: any) => item.selectP === '指令')!.selectOptions = orderList.rows.map((item: any) => {
    return {
      optionKey: item,
      optionValue: item,
      optionLabel: item
    }
  })
}
onMounted(() => {
  getSelectOptions()
})

watch(printTag, () => {
  nextTick(() => {
    const qrCodeContainer = document.querySelector<any>('.printContent')
    if (qrCodeContainer) {
      qrCodeContainer.style.display = 'block'
      const printWindow = window.open('', '_blank')
      printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印标签</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto;
            }
            @media print {
                /* 打印时的样式 */
              .page-break {
                break-after: page;
              }

                /* 其他打印样式 */
            }
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
            }
            .pad3 {
                padding: 2px;
            }

            .main {
                display: flex;
                justify-content: center;
            }

            .left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-right: 2px;
            }


            .title {
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
            }

            .center {
                text-align: center;
            }

            .right {
                text-align: right;
            }

            .left {
                text-align: left;
            }

            .no-padding {
                padding: 0;
            }

            .no-margin {
                margin: 0;
            }

            .margin-5 {
                margin: 5px;
            }

            .margin-top-5 {
                margin-top: 5px;
            }

            .margin-top-15 {
                margin-top: 15px;
            }

            .size-8 {
                font-size: 8px !important;
            }

            .size-10 {
                font-size: 10px;
            }

            .size-12 {
                font-size: 12px;
            }

            .size-14 {
                font-size: 14px;
            }

            .size-16 {
                font-size: 17px;
            }

            .size-18 {
                font-size: 18px;
            }

            .size-24 {
                font-size: 24px;
            }

            #date-tip {
                position: relative;
            }

            span.tip {
                display: inline-block;
                height: 14px;
                line-height: 14px;
                margin-right: 30px;
            }

            table {
                font-size: 10px;
                border-collapse: collapse;
                border-spacing: 0;
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
                width: 100%;
            }

            table th,
            table td {
                border: 1px solid #000;
                font-size: 12px;
            }

            table.no-border,
            table.no-border th,
            table.no-border td {
                border: 0px;
            }

            table td.no-left-border {
                border-left: 0px;
            }

            table td.no-right-border {
                border-right: 0px;
            }

            .mainTable {
                margin: 0 20px;
            }

            /* 备料派工单汇总表 */
            .header {
                display: flex;
                justify-content: space-evenly;
            }

            .footer {
                margin-top: 20px;
                margin-right: 100px;
                display: flex;
                justify-content: right;
            }



            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

      // 将 .qrCodeContainer 的内容复制到打印窗口的 body 中
      const cloneContainer = qrCodeContainer.cloneNode(true)
      printWindow!.document.body.appendChild(cloneContainer)

      printWindow!.document.write(`
        </body>
      </html>
    `)
      printWindow!.document.close()

      // 开始打印
      printWindow!.print()

      // 打印完成后，可以恢复 .qrCodeContainer 的原始显示状态
      qrCodeContainer.style.display = 'none'
    }
  })
})
</script>
